Hover submenus not working with FF or Opera

[Meri]

Hello

Everybody on the internet seems to think this is a problem with IE but for
me it works fine with IE, but the submenus do not appear with Firefox
andOpera.

The html is a simple list with sublists.

The CSS looks like this:

#menu ul {
list-style: none;
margin: 0;
padding: 0;
display: block;
font: bold 14pt/14pt "Times New Roman";
line-height: 30px;
width: 200px;
}

So we show the main menu. But we don't show the submenus:

#menu ul ul {
list-style: none;
margin: 0;
padding: 0;
display: none;
font: bold 12pt/12pt "Times New Roman";
line-height: 30px;
position: absolute;
left: 200px; top: 0px;
}

Except when the mouse is over the list item:

#menu li:hover ul {
display: block;
}

This works beautifully with IE (version 7.0.5730.11) but the submenus stay
hidden with Firefox (version 2.0.0.14) and Opera (version 9.10). I have
Windows XP Home if it makes a difference. I've tried different combinates of
li ul and li:hover :-) I even tried a:hover but then it doesn't work with IE
either.

I define colors under #menu a, #menu a:hover etc.

Can anyone help? I want to keep it pure CSS.

Thanks.

Meri

[John Hosking]

Meri wrote:

Everybody on the internet

Tell them hello for me.

seems to think this is a problem with IE but for
me it works fine with IE, but the submenus do not appear with Firefox
andOpera.

The html is a simple list with sublists.

The CSS looks like this:

Oh, a URL to a simplified test case is always so much better.

>
#menu ul {
list-style: none;
margin: 0;
padding: 0;
display: block;
font: bold 14pt/14pt "Times New Roman";

You should probably get rid of the /14pt here, since you presumably want
a standard line-height. Second-best is to replace the pt-units-based
value with a value without units, such as 1.2 or 1.3.
See <http://www.w3.org/TR/CSS21/visudet.html#propdef-line-heightfor
usage of "number" values, plus search the Web/Usenet for further
discussions on why and when to use such values.

Also, 14pt is a specification best used for printing. Better is a
percentage, like 100%. See <http://tekrider.net/html/fontsize.php>.

Furthermore, what happens to the visitors who don't have Times New
Roman? Do you want them to see their default serif font? Or just their
default, which might be sans-serif, like Arial or Helvetica? Consider
adding a generic family, such as
font: bold 100% "Times New Roman",serif;

line-height: 30px;

What?!? Why did you have the /14pt then?

And what happens when the visitor upsizes the text? Yes, the txt grows
out out of the space you've provided it.

width: 200px;

Same here. Try something in em units.

}

So we show the main menu. But we don't show the submenus:

#menu ul ul {
list-style: none;
margin: 0;
padding: 0;
display: none;
font: bold 12pt/12pt "Times New Roman";
line-height: 30px;
position: absolute;
left: 200px; top: 0px;
}

Except when the mouse is over the list item:

#menu li:hover ul {
display: block;
}

Here's why a URL is better: why could try it ourselves if we had a URL.

>
This works beautifully with IE (version 7.0.5730.11) but the submenus stay
hidden with Firefox (version 2.0.0.14) and Opera (version 9.10).

As it will in IE6 (and under), since :hover isn't supported on elements
other than <ain IE6.

I suspect there is some problem with the code and/or your selectors,
keeping #menu ul ul from being the same as #menu li:hover ul. Otherwise,
I'm wondering about a sub-menu item that appears in an
absolutely-positioned location. Are you sure it's not appearing, but is
just *behind* something else?

I have
Windows XP Home if it makes a difference. I've tried different combinates of
li ul and li:hover :-) I even tried a:hover but then it doesn't work with IE
either.

I define colors under #menu a, #menu a:hover etc.

Could be. URL?

--
John
Pondering the value of the UIP: http://improve-usenet.org/

[Meri]

Tell them hello for me.

Thanks for replying, John, and for the tips. You were right about defining
line height twice, for example.

I'll stick to the main problem. I'll have to make a more anonymous version
and find where to post the files temporarily.

>This works beautifully with IE (version 7.0.5730.11) but the submenus
stay hidden with Firefox (version 2.0.0.14) and Opera (version 9.10).

As it will in IE6 (and under), since :hover isn't supported on elements
other than <ain IE6.

....but I won't bother right away since I'll clearly have to find a different
solution all together. What a pain!

I did already try a:hover since each list item also has a link but must've
done something wrong.

All dropdown menu examples I find on the net seem so complicated. I'm sure
it's possible to do it in a simple way.

I suspect there is some problem with the code and/or your selectors,
keeping #menu ul ul from being the same as #menu li:hover ul.

I tried all kinds of combinations of li, li:hover, ul etc. Will keep trying.

Otherwise, I'm wondering about a sub-menu item that appears in an
absolutely-positioned location.

Well, relative pushes the next main menu item down below the submenu. It
seems to be fine.

Are you sure it's not appearing, but is just *behind* something else?

I thought about that and tried z-index. It didn't make any difference.
Besides, the submenus appear correctly without hovering if I change display:
none to display: block.

So I'll ask again if I can't make a nice dropdown menu with a:hover - to
make it work with different browsers.

[Beauregard T. Shagnasty]

Meri wrote:

All dropdown menu examples I find on the net seem so complicated. I'm
sure it's possible to do it in a simple way.

If this is for a real commercial site -- anything other than a personal
or hobby site -- be sure to hire testers with motor deficiencies or
hand/eye coordination problems. Consider keyboard users as well (and
those with JavaScript disabled).

Personally, I despise multi-level "drop-down" menus. I don't think I
stand alone in this.

--
-bts
-Friends don't let friends drive Windows

[Meri]

Hello to you too

If this is for a real commercial site -- anything other than a personal
or hobby site -- be sure to hire testers with motor deficiencies or
hand/eye coordination problems. Consider keyboard users as well (and
those with JavaScript disabled).

It's not for a commercial site but for not personal or hobby either. It's
for an association so yes, it should work with older versions of the
browsers too. I'm sure all the users have IE but I'm testing FF and Opera,
too.

I will add a link to the main menu items so that those users who can't see
the dropdown menu can open a "table of contents" page.

I don't intend to use any JavaScript.

Personally, I despise multi-level "drop-down" menus. I don't think I
stand alone in this.

There always will be taste issues :-) And I don't like more than two levels
either.

[totalstranger]

On or about 6/9/2008 9:04 AM, it came to pass that Meri wrote:

Hello to you too

>If this is for a real commercial site -- anything other than a personal
or hobby site -- be sure to hire testers with motor deficiencies or
hand/eye coordination problems. Consider keyboard users as well (and
those with JavaScript disabled).

It's not for a commercial site but for not personal or hobby either. It's
for an association so yes, it should work with older versions of the
browsers too. I'm sure all the users have IE but I'm testing FF and Opera,
too.

I will add a link to the main menu items so that those users who can't see
the dropdown menu can open a "table of contents" page.

I don't intend to use any JavaScript.

>Personally, I despise multi-level "drop-down" menus. I don't think I
stand alone in this.

There always will be taste issues :-) And I don't like more than two levels
either.

In Firefox take a look at Tools-->Error Console-->then scroll to the
end. The issue or issues may be listed. You may need a small bit of
Javascript for IE6 and lower. Search for Son of Suckerfish. I would
definitely add that link on the first level pointing to a "links
page/table of contents page" making it functional when the dropdowns
don't or can't open.

BTW I use a two level menu on my website that works really well and
received similar flak when I asked for help.

[Meri]

Just to let you know, I found the problem. It was a really stupid mistake
from my part in my html list. I had closed the list item, which contained my
submenu, before the submenu when
</limust come after </ulof course! That's what you get when you copy
paste and don't pay attention. And I kept stairing at my css.

IE clearly didn't take anynotice of my mistake (which can be quite
misleading) but FF and Opera protested.

Most importantly, now my dropdown menus work beautifully with the three
browsers and the positioning is as wanted too.

I will include a "table of contents" page for those who can't see the
dropdown menu.

Meri

[John Hosking]

Meri wrote:

Just to let you know, I found the problem. It was a really stupid mistake
from my part in my html list. I had closed the list item, which contained my
submenu, before the submenu when </limust come after </ulof course!

As expected.

That's what you get when you copy paste and don't pay attention.

Yes. Been there, done that. That's why we ask for a URL. (We can either
guess blindly, ignore you, or help find the mistake. Choice #3 can only
be done with a URL.)
--
John
Pondering the value of the UIP: http://improve-usenet.org/

[Meri]

Yes. Been there, done that. That's why we ask for a URL. (We can either

guess blindly, ignore you, or help find the mistake. Choice #3 can only be
done with a URL.)

If I have any other questions, I'll give you a url, promise.

Thanks!